<template>
  <div class="chemical-query">
    <!-- 查询表单区域 -->
    <el-form :model="form" inline class="query-form">
      <el-form-item label="CAS号">
        <el-input v-model="form.casNo" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="危化品名称">
        <el-input v-model="form.chemicalName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="handleQuery">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 危化品列表表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="casNo" label="CAS号"></el-table-column>
      <el-table-column prop="chemicalName" label="危化品名称"></el-table-column>
      <el-table-column prop="dangerLevel" label="危险程度"></el-table-column>
      <!-- <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small">操作</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ChemicalQuery",
  data() {
    return {
      // 表单绑定数据
      form: {
        casNo: "",
        chemicalName: "",
      },
      // 表格数据源
      tableData: [
        { casNo: "", chemicalName: "", dangerLevel: "" },
        { casNo: "", chemicalName: "", dangerLevel: "" },
        { casNo: "", chemicalName: "", dangerLevel: "" },
      ],
    };
  },
  methods: {
    // 查询方法（可根据实际需求对接接口）
    handleQuery() {
      console.log("查询参数：", this.form);
      // 此处可添加接口请求逻辑，更新tableData
    },
    // 添加方法（可根据实际需求弹出添加表单）
    handleAdd() {
      console.log("执行添加操作");
      // 此处可添加弹出添加表单的逻辑
    },
  },
};
</script>

<style scoped>
.chemical-query {
  padding: 20px;
  box-sizing: border-box;
}
.query-form {
  margin-bottom: 15px;
}
</style>
